<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn01">添加超链接</button>
    
    <ul id="u1" style="background-color: yellow;">
        <li ><a href="javascript:;" class="link">超链接一</a></li>
        <li ><a href="javascript:;" class="link">超链接二</a></li>
        <li ><a href="javascript:;" class="link">超链接三</a></li>
    </ul>

    <script type="text/javascript">
        window.onload = function(){
            
            var u1= document.getElementById("u1");
            //点击按钮以后添加超链接
            var btn01 = document.getElementById("btn01");
            btn01.onclick=function(){
                
                //创建一个li
                var li = document.createElement("li");
                li.innerHTML="<a href='javascript:;' class='link'>新建超链接</a>";
                
                //将li添加到ul中
                u1.appendChild(li);
            }
            
            u1.onclick = function(event){
                //解决浏览器兼容问题
                event = event || window.event;
                
                /**
                 * target
                 *  -事件对象的target属性表示触发事件的对象
                 *  -ul中包括li、文本及超链接，只有点击超链接触发事件
                 */
                if(event.target.className == "link"){
                    alert("我是ul单击响应函数");
                }
            }
        }
    </script>
    
    
</body>
</html>